<template>
  <div class="controller">
    <div class="daysClass">
      <label>请输入天数：</label>
      <vxe-input type="text" v-model="days" placeholder="请输入天数"
                @blur="searchFunction"
                @keyup.enter.native="searchFunction"
      >请输入天数</vxe-input>
    </div>
    <div ref="mian" class="mian" />
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {getMachineDetaiPie} from '@/services/DataService';

export default {
  name: "MachinePie",
  data() {
    return {
      chartData: null, // 用于存储从 API 获取的数据
      chartInstance: null, // 用来保存 ECharts 实例的引用
      days:100,
    }
  },
  created() {
    this.getdataSource()
  },
  mounted(){
    document.title = `近${this.days}天内染缸饼图`;
  },
  methods: {
    searchFunction() {
      this.getdataSource();
    },
    async getdataSource() {
      this.chartData = await getMachineDetaiPie(this.days);
      if (null==this.chartInstance){
        this.chartInstance = echarts.init(this.$refs.mian);
      }
      let totalNum = this.chartData.length;
      const rawData = {
        countNum1: 0,
        countNum2: 0,
        countNum3: 0,
        countNum4: 0,
      };
      this.chartData.forEach(item => {
        let wlavg_rate = item.wlavg_rate;
        if (wlavg_rate<60){
          rawData.countNum1 += 1;
        }else if (wlavg_rate>=60 && wlavg_rate<75){
          rawData.countNum2 += 1;
        }else if (wlavg_rate>=75 && wlavg_rate<100){
          rawData.countNum3 += 1;
        }else if (wlavg_rate>100){
          rawData.countNum4 += 1;
        }
      });
      let percent1 = Math.round((rawData.countNum1/totalNum*100)*100)/100;
      let percent2 = Math.round((rawData.countNum2/totalNum*100)*100)/100;
      let percent3 = Math.round((rawData.countNum3/totalNum*100)*100)/100;
      let percent4 = Math.round((rawData.countNum4/totalNum*100)*100)/100;
      const dataSource = { // 后端返回数据
        totalNum: totalNum,
        dataList: [
          {title: '少于60',countNum: rawData.countNum1,percent: percent1},
          {title: '60到75',countNum: rawData.countNum2,percent: percent2},
          {title: '75到100',countNum: rawData.countNum3,percent: percent3},
          {title: '大于100',countNum: rawData.countNum4,percent: percent4},
        ]
      }
      const data = dataSource.dataList.map(item => { // 后端返回数据处理
        return {
          value: item.countNum,
          name: `${item.title}有${item.countNum}缸【占${item.percent}%】`
        }
      })
      this.$nextTick(() => {
        const option = {
          title: {
            text: `近${this.days}天内共(${dataSource.totalNum})缸`,//总标题,
            // subtext: `近${this.days}天内共(${dataSource.totalNum})缸`,
            left: 'left',
            textStyle: {
              color: '#333',
              fontSize: 20
              // 其他可选项
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: '4%',
            left: 'left'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              data,
              // color: ['red', 'purple', 'yellow'], // 自定义颜色范围
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        option && this.chartInstance.setOption(option)
      })
    }
  }
}
</script>

<style lang="scss">
.controller {
  padding: 0 20px;
  .mian{
    width: 100%;
    height: 800px;
    margin: 20px auto;
  }
}
.daysClass{
  text-align: left;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
</style>